import React from 'react';

export const TextInput = ({ value, onChange, rows = 4, placeholder = "请输入文本..." }) => (
  <textarea
    className="w-full p-3 border border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 mb-4"
    rows={rows}
    placeholder={placeholder}
    value={value}
    onChange={onChange}
  />
);

export const EmbeddingOptions = ({ options, onChange }) => (
  <div className="mb-4 space-y-3">
    <h3 className="text-lg font-medium text-gray-900 mb-2">向量数据库配置</h3>
    
    <div>
      <label htmlFor="provider" className="block text-sm font-medium text-gray-700 mb-1">
        提供商
      </label>
      <select
        id="provider"
        name="provider"
        value={options.provider}
        onChange={onChange}
        className="w-full p-2 border border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500"
      >
        <option value="huggingface">HuggingFace</option>
        <option value="openai">OpenAI</option>
        <option value="bedrock">Bedrock</option>
      </select>
    </div>

    <div>
      <label htmlFor="model" className="block text-sm font-medium text-gray-700 mb-1">
        模型
      </label>
      <input
        type="text"
        id="model"
        name="model"
        value={options.model}
        onChange={onChange}
        className="w-full p-2 border border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500"
        placeholder="BAAI/bge-m3"
      />
    </div>

    <div>
      <label htmlFor="dbName" className="block text-sm font-medium text-gray-700 mb-1">
        数据库名称
      </label>
      <input
        type="text"
        id="dbName"
        name="dbName"
        value={options.dbName}
        onChange={onChange}
        className="w-full p-2 border border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500"
        placeholder="finance_terms_bge_m3"
      />
    </div>

    <div>
      <label htmlFor="collectionName" className="block text-sm font-medium text-gray-700 mb-1">
        集合名称
      </label>
      <input
        type="text"
        id="collectionName"
        name="collectionName"
        value={options.collectionName}
        onChange={onChange}
        className="w-full p-2 border border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500"
        placeholder="financial_concepts"
      />
    </div>
  </div>
);